<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <style>
        body {
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column; /* 垂直排列 */
            justify-content: space-between; /* 将内容分散到顶部和底部 */
        }
        .admin-container {
            width: 600px;
            height: 600px;
            margin: auto;
            position: relative; /* 改为 relative */
        }
        .sidebar {
            display: flex;
            justify-content: center;  /* 水平居中 */
            align-items: center;      /* 垂直居中 */
            height: 120px;            /* 必须设置父容器高度 */
        }
        .ripple-btn {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #4CAF50;
            border: none;
            color: white;
            margin: 14px;
            position: relative;
            overflow: hidden;
            transition: transform 0.1s;
            text-align-last: center;
        }
        .ripple-btn:active {
            transform: scale(0.95);
        }
        @keyframes ripple {
            from { transform: scale(0); opacity: 1; }
            to { transform: scale(4); opacity: 0; }
        }
        .ripple-effect {
            position: absolute;
            background: rgba(255,255,255,0.4);
            border-radius: 50%;
            pointer-events: none;
            animation: ripple 600ms linear;
        }
        .select-box {
            width: 100px;
            height: 100px;
            margin: 14px;
            text-align-last: center;
        }
        .btn {
            padding: 16px 32px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn-primary {
            background: #3498db;
            color: white;
        }
        .btn-danger {
            background: #e74c3c;
            color: white;
        }
        .parent-div {
            display: flex;
            justify-content: center;  /* 水平居中 */
            align-items: center;      /* 垂直居中 */
            height: 80px;            /* 必须设置父容器高度 */
        }
        .footer {
            text-align: center;
            padding: 10px;
            background-color: #f5f6fa;
        }
    </style>
    <script>
        config=''
        document.addEventListener('DOMContentLoaded',  function() {
            loadconfiglist();
            
        });

        remote_config_map = {}
        function loadconfiglist() {
            post('/touch16_list', '{}', function(state, responseText){
                remote_config_list = JSON.parse(responseText);
                config = remote_config_list[0]
                loadbtns();
            })
        }

        function loadbtns() {
            var n = 1;
            btns = ''
            for(var i = 1; i <= 4; i++) {
                btns += `
                <div id="btn_list_` + i + `" class="sidebar">
                `
                    for(var j = 1; j <= 4; j++) {
                        select_idx = config.substring(n-1, n)
                        btns += `
                            <button class="ripple-btn" onclick="btndo(` + n +`)">J` + n + (select_idx == 1?'按下抬起':select_idx == 2?'   单击':select_idx == 3?'   双击':'') + `</button>
                            <select class="select-box" style="display:none;" id="J` + n +`">
                                <option value="1" ` + (select_idx == 1?'selected':'') + `>J` + n + `按下抬起</option>
                                <option value="2" ` + (select_idx == 2?'selected':'') + `>J` + n + `单击</option>
                                <option value="3" ` + (select_idx == 3?'selected':'') + `>J` + n + `双击</option>
                            </select>
                        `
                        n++;
                    }
                btns += `
                </div>
                `
            }
            btns += `
            </div>
            <div id="set_div" class="parent-div">
                <button id="set" class="btn btn-primary" onclick="formdo(1)">设置</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div id="save_return_div" class="parent-div" style="display:none">
                <button id="save" class="btn btn-primary" onclick="formdo(2)">保存</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button id="return" class="btn btn-primary" onclick="formdo(3)">返回</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            `

            main.innerHTML = btns;


            document.querySelectorAll('.ripple-btn').forEach(btn  => {
                btn.addEventListener('click',  function(e) {
                    const ripple = document.createElement('div'); 
                    const rect = btn.getBoundingClientRect(); 
                    const size = Math.max(rect.width,  rect.height); 
                    
                    ripple.style.width  = ripple.style.height  = size + 'px';
                    ripple.style.left  = e.offsetX  - size/2 + 'px';
                    ripple.style.top  = e.offsetY  - size/2 + 'px';
                    ripple.classList.add('ripple-effect'); 
                    
                    this.appendChild(ripple); 
                    setTimeout(() => ripple.remove(),  600);
                });
            });
        }

        function formdo(type) {
            if(type == 1) {
                set_div.style.display = 'none';
                save_return_div.style.display = 'flex';

                document.querySelectorAll('.ripple-btn').forEach(btn  => {
                    btn.style.display = 'none'
                });
                document.querySelectorAll('.select-box').forEach(btn  => {
                    btn.style.display = 'flex'
                });
            } else {
                if(type == 2) {
                    // set_div.style.display = 'flex';
                    // save_return_div.style.display = 'none';

                    newconfig = ''
                    for(var i = 1; i <= 16; i++) {
                        newconfig+=document.getElementById('J'+i).value
                    }
                    newconfig += ''

                    post('/touch16_save_action?config_name=default', newconfig, function(state, responseText){
                        location.reload();
                    })

                } else if(type == 3) {
                    location.reload();
                }
            }
        }

        touchstate={}
        function btndo(touch_idx){
            select_idx = config.substring(touch_idx-1, touch_idx)

            select_idx_action1 = ''
            if(select_idx == 1){
                if(touchstate[touch_idx] == undefined || touchstate[touch_idx] == 'touch_up'){
                    select_idx_action_1 = 'touch_down'
                } else {
                    select_idx_action_1 = 'touch_up'
                }
                
            }
            
            var form = {"touch_number":touch_idx,"touch_action":(select_idx == 1?select_idx_action_1:select_idx == 2?'touch_once':select_idx == 3?'touch_double':''),"touch_sleep":"10","touch_count":"1"}

            post('/touch16_action?config_name=default', form, function(state, responseText){
                if(state == 1) {
                    touchstate[touch_idx] = select_idx_action_1;
                    console.error("Ok:" + touchstate[touch_idx]);
                } else {
                    console.error("Error:" + touchstate[touch_idx]);
                }
            })
        }

        function post(url, jsonData, callback) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.send(JSON.stringify(jsonData));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    callback(1, xhr.responseText)
                } else if (xhr.readyState === 4) {
                    callback(0, xhr.status)
                }
            };
        }
        
    </script>
</head>
<body>
    <div id="main" class="admin-container"></div>
    <div style="text-align: center; margin-top: 20px; padding: 10px;">
        <a href="/" style="color: #3498db; text-decoration: none; font-size: 30px;">返回定时控制点击</a>
    </div>
</body>
</html>